<template>
	<div class="theContent">
		<contentTitle
      :src="require('../../assets/title-videoMonitor.png')"
      rightType="select"
      v-model="value"
      :options="options"
      @change="onChange"
    />
		<contentBox class="theEchart">
			视频监控
		</contentBox>
	</div>
</template>

<script>
import contentBox from "@/views/cockpit/components/contentBox.vue"
import contentTitle from "@/views/cockpit/components/contentTitle.vue"

export default {
	components: {
		contentBox,contentTitle
	},
	data() {
		return {
      value:1,
      options:[
        {
          label:"监控监控监控监控监控点1",
          value:1,
        },
        {
          label:"监控点2",
          value:2,
        },
        {
          label:"监控点3",
          value:3,
        },
      ]
		};
	},
	mounted() {
		this.loadData();
	},
	beforeDestroy() {
		this.clearData();
	},
	methods: {
		clearData() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		loadData() {
			this.loading = false;
		},
    onChange(){
      console.log("videoMonitor onChange:",this.value)
    }
	}
};
</script>
<style lang="scss" scoped>
.theContent {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	// gap:20px;

	.theEchart {
		flex:1;
	}
}
</style>
